<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>易客客户管理登录</title>
    <meta name="author" content="DeathGhost" />
    <link rel="stylesheet" type="text/css" href="/crm/loginPage/style.css" tppabs="style.css" />
    <style>
        body{height:100%;background:#16a085;overflow:hidden;}
        canvas{z-index:-1;position:absolute;}
    </style>
    <script src="/crm/loginPage/jquery.js"></script>
    <script src="/crm/loginPage/verificationNumbers.js" tppabs="verificationNumbers.js"></script>
    <script src="/crm/loginPage/Particleground.js" tppabs="Particleground.js"></script>
    <script>
        $(document).ready(function() {
            //粒子背景特效
            $('body').particleground({
                dotColor: '#5cbdaa',
                lineColor: '#5cbdaa'
            });
            //验证码i
            createCode();
            //测试提交，对接程序删除即可
            $(".submit_btn").click(function(){
                location.href="javascript:;"/*tpa=http://***index.html*/;
            });
        });
    </script>
<!--*****************************************************************-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--ajax方式请求后台-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style lang="scss" scoped>
        .login-container {
            /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            background-clip: padding-box;
            margin: 180px auto;
            width: 380px;
            padding: 0px 0px;
            background: #fff;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 0px #cac6c6;}
        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: #505458;
        }
        .remember {
            margin: 0px 0px 35px 0px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
             class="demo-ruleForm login-container,admin_login">
        <dl class="admin_login" style="width:380px;" >
            <dt>
                <strong>易客CRM客户管理系统</strong>
                <em>Management System</em>
            </dt>
            <dd class="user_icon" style="height:55px;width:385px;">
                <!--<input type="text" placeholder="账号" class="login_txtbx"/>-->
                <el-form-item prop="account" class="login_txtbx" style="height:50px;" >
                    <el-input  style="width:333px;margin: 0px 0px;padding: 0px 0px;" type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="请输入账号"></el-input>
                </el-form-item>
            </dd>
            <dd class="pwd_icon"  style="height:55px;width:385px;">
                <!--<input type="password" placeholder="密码" class="login_txtbx"/>style="margin: 0px;padding: 0px;"-->
                <el-form-item prop="checkPass"  class="login_txtbx" style="height:50px;">
                    <el-input  style="width:333px;margin: 0px 0px;padding: 0px 0px;"  type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="请输入密码"></el-input>
                </el-form-item>
            </dd>
            <dd class="val_icon">
                <div class="checkcode">
                    <input type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx">
                    <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
                </div>
                <input type="button" value="验证码核验" class="ver_btn" onClick="validate()">
            </dd>
            <dd>
                <el-form-item style="width:100%;">
                    <el-button type="primary" class="submit_btn" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录
                    </el-button>
                </el-form-item>
                <!--<input type="button" value="立即登陆" class="submit_btn"/>-->
            </dd>
            <a href="/crm/fg/forget" style="text-decoration:none;font-size:17px;color:white;font-family: 仿宋;float: right">忘记密码?</a><br/><br/>
            <dd>
                <p>© 2018-2019 jq22 版权所有</p>
                <p>AAAQY87-第四小组</p>
            </dd>
        </dl>
    </el-form>
</div>
<!--***************************************************-->
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            logining: false,
            ruleForm2: {
                account: 'xiaoli',
                checkPass: 'admin'
            },
            rules2: {
                account: [
                    {required: true, message: '请输入账号', trigger: 'blur'},
                ],
                checkPass: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                ]
            },
            checked: true
        },
        methods: {
            handleReset2: function () {
                this.$refs.ruleForm2.resetFields();
            },
            open8:function(msg) {
                this.$message({
                    showClose: true,
                    message: msg,
                    type: 'error'
                });
            },
            handleSubmit2: function (ev) {
                var _this = this;
                this.$refs.ruleForm2.validate((valid) => {
                    if(valid) {
                        if(!validate()){
                            vm.open8("验证码错误！");
                        }else{
                            var loginParams = {loginName: this.ruleForm2.account, password: this.ruleForm2.checkPass};
                            var url="/crm/log/login";
                            vm.logining = true;
                            //对用户登录进行判定
                            axios.post(url, loginParams).then(function (response) {
                                vm.logining = false;
                                console.info(response);
                                if(response.data.retStatus==0){
                                    console.info("登录成功！")
                                    window.location.href="/crm/log/toindex";
                                }else{
                                    vm.open8(response.data.message)
                                }

                            }).catch(function (error) {
                                console.log(error);
                            });
                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            }
        }
    })
</script>
</body>
</html>
